<!DOCTYPE html>
<html>
	<head>
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419308738737930"
		     crossorigin="anonymous"></script>
		<title>千千万能工具箱-lol英雄详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">
		<style>
			/*  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */
		</style>
	</head>
	<body>
		<div id="app">

			<div v-show="status">


				<van-row>
					<van-col span="8" style="text-align: center;padding-top: 5%;">
						<van-image round width="5rem" height="5rem" :src="heroInfo.heroHead" />
					</van-col>
					<van-col span="16" style="text-align: center;;padding-top: 12%; font-size: 20px;font-weight: bold;">
						<span>{{heroInfo.name}}-{{heroInfo.title}}</span>
					</van-col>

				</van-row>

				<van-row>
					<van-col span="8"
						style="padding-top: 10%;padding-left: 2%;color: grey;font-weight: bold;font-size: 17px;">
						英雄描述
					</van-col>
				</van-row>

				<van-row>
					<van-col span="24" style="padding-top: 2%;padding-left: 2%;">

						<van-text-ellipsis :content="heroInfo.heroInfo.hero.shortBio" rows="3" expand-text="展开"
							collapse-text="收起" />
					</van-col>
				</van-row>
				<van-row>
					<van-col span="8"
						style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;font-size: 17px;">
						英雄技能
					</van-col>
				</van-row>

				<div style="margin-top: 2%;">
					<van-tabs v-model:active="active">
						<van-tab :title="heroInfo.heroInfo.spells[1].name">
							<van-row>

								<van-col span="4"
									style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;">
									<van-image width="50" height="50"
										:src="heroInfo.heroInfo.spells[1].abilityIconPath" />

								</van-col>
								<van-col span="19"
									style="padding-top: 6%;padding-left: 2%;color: grey;font-weight: bold;">
							 	被动技能-{{heroInfo.heroInfo.spells[1].name}}
								</van-col>
							</van-row>

							<van-text-ellipsis style="padding-left: 2%;"
								:content="heroInfo.heroInfo.spells[1].description" rows="3" expand-text="展开"
								collapse-text="收起" />
						</van-tab>
						<van-tab :title="heroInfo.heroInfo.spells[2].name">
							<van-row>

								<van-col span="4"
									style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;">
									<van-image width="50" height="50"
										:src="heroInfo.heroInfo.spells[2].abilityIconPath" />

								</van-col>
								<van-col span="19"
									style="padding-top: 6%;padding-left: 2%;color: grey;font-weight: bold;">
									Q-{{heroInfo.heroInfo.spells[2].name}}
								</van-col>
							</van-row>

							<van-text-ellipsis style="padding-left: 2%;"
								:content="heroInfo.heroInfo.spells[2].description" rows="3" expand-text="展开"
								collapse-text="收起" />
						</van-tab>
						<van-tab :title="heroInfo.heroInfo.spells[4].name">
							<van-row>

								<van-col span="4"
									style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;">
									<van-image width="50" height="50"
										:src="heroInfo.heroInfo.spells[4].abilityIconPath" />

								</van-col>
						 	<van-col span="19"
									style="padding-top: 6%;padding-left: 2%;color: grey;font-weight: bold;">
									W-{{heroInfo.heroInfo.spells[4].name}}
								</van-col>
							</van-row>

							<van-text-ellipsis style="padding-left: 2%;"
								:content="heroInfo.heroInfo.spells[4].description" rows="3" expand-text="展开"
								collapse-text="收起" />
						</van-tab>
						<van-tab :title="heroInfo.heroInfo.spells[0].name">
							<van-row>

								<van-col span="4"
									style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;">
									<van-image width="50" height="50"
										:src="heroInfo.heroInfo.spells[0].abilityIconPath" />

								</van-col>
								<van-col span="19"
									style="padding-top: 6%;padding-left: 2%;color: grey;font-weight: bold;">
									E-{{heroInfo.heroInfo.spells[0].name}}
								</van-col>
							</van-row>

							<van-text-ellipsis style="padding-left: 2%;"
								:content="heroInfo.heroInfo.spells[0].description" rows="3" expand-text="展开"
								collapse-text="收起" />
						</van-tab>
						<van-tab :title="heroInfo.heroInfo.spells[3].name">
							<van-row>

								<van-col span="4"
									style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;">
									<van-image width="50" height="50"
										:src="heroInfo.heroInfo.spells[3].abilityIconPath" />

								</van-col>
								<van-col span="19"
									style="padding-top: 6%;padding-left: 2%;color: grey;font-weight: bold;">
									R-{{heroInfo.heroInfo.spells[3].name}}
								</van-col>
							</van-row>

							<van-text-ellipsis style="padding-left: 2%;"
								:content="heroInfo.heroInfo.spells[3].description" rows="3" expand-text="展开"
								collapse-text="收起" />
						</van-tab>
					</van-tabs>

				</div>
			<van-row>
				<van-col span="8"
					style="padding-top: 2%;padding-left: 2%;color: grey;font-weight: bold;font-size: 17px;">
					英雄皮肤
				</van-col>
			</van-row>

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="padding-top: 2%;" @change="skinChange"
>
  <van-swipe-item v-for="item,index in  heroInfo.heroInfo.skins"  @click="skinClick(index)">

	<div>
		<van-image

		  :src="item.mainImg"
		/>
	</div>
  </van-swipe-item>
  

</van-swipe>
<div style="text-align: center; padding-top: 2%;">{{skinIndex+1}}/{{heroInfo.heroInfo.skins.length}}</div>
<div style="text-align: center; ">{{heroInfo.heroInfo.skins[skinIndex].name}}</div>

<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">版本-{{heroInfo.heroInfo.version}}</van-divider>
			<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">数据更新时间-{{heroInfo.updateTime}}</van-divider>
			
			<van-overlay :show="show"  />
			</div>


		</div>

		<!-- 引入样式文件 -->
		<link rel="stylesheet" href="../../js/vant4/index.css" />

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/vue3/vue3.js"></script>
		<script src="../../js/vant4/vant.min.js"></script>

		<script>
			// const baseUrl = "http://192.168.1.121:8848"
			
			const baseUrl = "https://api.lqcpws.cn"
			// 在 #app 标签下渲染一个按钮组件
			const app = Vue.createApp({
				data() {
					return {
						title: 'hello',
						id: "",
						heroInfo: {
							heroInfo: {
								hero: {},
								spells: [{}, {}, {}, {}, {}],
								skins:[{}, {}, {}, {}, {}],
							}
						},
						status: true,
						align: "center",
						skinIndex:0,
						skinList:[],
					}
				},
				methods: {
					loadHeroInfo() {
						let _this = this
						_this.show=true
						$.ajax({
							type: 'get',
							url: baseUrl + '/pc/lolHero/getLolHero',
							data: {
								heroId: _this.id
							},
							success(res) {
								if (res.data == undefined) {
									_this.status = false
								} else {
									_this.heroInfo = res.data
									_this.heroInfo.heroInfo = JSON.parse(res.data.heroInfo)
									_this.heroInfo.heroInfo.skins=_this.heroInfo.heroInfo.skins.filter(item => item.chromasBelongId =='0');
									_this.heroInfo.heroInfo.skins.forEach(item=>{
										_this.skinList.push(item.mainImg)
									})
									console.log(_this.heroInfo.heroInfo)
								}
                             _this.show=false


							}


						})


					},
					updateCount(){
						let _this = this
						$.ajax({
							type: 'get',
							url: baseUrl + '/pc/lolHero/updateSeeCount',
							data: {
								heroId: _this.id
							},
							success(res) {
						
						
						
						
							}
						
						
						})
					},
					skinChange(index){
						// console.log(index)
						this.skinIndex=index
					},
					skinClick(index){
						console.log(index)
						vant.showImagePreview({
  images: this.skinList,
  startPosition: index,
});
					},
					requestCount() {
						// let ys=	LZString.compressToBase64(JSON.stringify(nes.toJSON()))
						// 	console.log(JSON.parse(LZString.decompressFromBase64(ys)))
						let _this = this
						$.ajax({
							type: 'get',
							url: baseUrl + "/pc/requestCountByDay",
							success: function(res) {
					
					
							}
					
					
						})
					
					},
				},
				mounted() {
					// console.log('--mo---')
					let search = window.location.search;
					if (search == undefined || search.trim() == "") {
						vant.showToast('缺少必填参数');
						this.status = false
						return
					}
					let params = search.split("=")
					if (params.length != 2) {
						vant.showToast('解析参数错误');
						this.status = false
						return
					}
					this.id = params[1]
					console.log(this.id)
					this.loadHeroInfo()
					this.updateCount()
					this.requestCount()
				}
			});
			app.use(vant);

			// 通过 CDN 引入时不会自动注册 Lazyload 组件
			// 可以通过下面的方式手动注册
			app.use(vant.Lazyload);


			app.mount('#app');
		</script>
	</body>
</html>
